<!-- 体重体脂 -->
<template>
  <border cardTitle="体重体脂">
    <Chart :optionData="option_column" style="height: 100%"></Chart>
  </border>
</template>
<script>
import border from "./border.vue";
import StatisticsMixins from "../StatisticsMixins";
import { bigScreenApi } from "@/api/index";
import * as echarts from "echarts";
// Mock数据
const mockData = {
  xdata: [...new Array(6)].map((item, i) => `${i + 1}月`),
  result: [
    {
      name: "测量次数",
      data: [...new Array(6)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)),
    },
    // {
    //   name: "病人",
    //   data: [...new Array(6)].map((item, i) => +(Math.random(0, 0.1) * 1000).toFixed(0)),
    // },
  ],
};

const color = [
  [
    {
      offset: 0,
      color: "#267A7B",
    },
    {
      offset: 0.5,
      color: "#267A7B",
    },
    {
      offset: 0.5,
      color: "#4EF6F6",
    },
    {
      offset: 1,
      color: "#4EF6F6",
    },
  ],
  [
    {
      offset: 0,
      color: "#647984",
    },
    {
      offset: 0.5,
      color: "#647984",
    },
    {
      offset: 0.5,
      color: "#C6E5E6",
    },
    {
      offset: 1,
      color: "#C6E5E6",
    },
  ],
];
const color2 = ["#4EF6F6", "#AFCED2"];

// tooltip
const tooltip = {
  trigger: "axis",
  textStyle: {
    fontSize: "100%",
  },
};

const legend = {
  data: ["测量次数", "病人"],
  textStyle: {
    fontSize: 12,
    color: "#fff",
  },
  itemWidth: 24,
  itemHeight: 15,
  itemGap: 15,
  top: "2%",
  right: "2%",
  selectedMode: false,
};
const grid = {
  top: "20%",
  left: "12%",
  right: "2%",
  bottom: "15%",
};
// xAxis
const xAxis = {
  axisTick: {
    show: true,
  },
  axisLine: {
    lineStyle: {
      color: "rgba(255,255,255, .2)",
    },
  },
  axisLabel: {
    textStyle: {
      fontSize: 12,
      color: "#fff",
    },
  },
  data: ["11月", "12月", "1月", "2月", "3月", "4月"],
};

// yAxis
const yAxis = [
  {
    type: "value",
    min: 0,
    // max: 140,
    splitNumber: 4,
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "rgba(255,255,255,0.2)",
      },
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      margin: 10,
      textStyle: {
        color: "rgba(255,255,255,0.6)",
      },
    },
    axisTick: {
      show: false,
    },
  },
];
const diamondData = mockData.result.reduce((pre, cur, index) => {
  // pre[index] = cur.data.map((el, id) => el + ( pre[index - 1] ? pre[index - 1][id] : 0))
  pre[index] = cur.data.map((el, id) => el);
  return pre;
}, []);

let series = mockData.result.reduce((p, c, i, array) => {
  console.log("i", ((i - 2) * 110) / 2);
  p.push(
    {
      z: i + 1,
      type: "bar",
      name: c.name,
      barWidth: 14,
      data: c.data,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: color[i],
        },
      },
      label: {
        normal: {
          show: true,
          position: "top",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
      },
    },
    {
      z: i + 10,
      type: "pictorialBar",
      symbolPosition: "end",
      symbol: "diamond",
      symbolSize: [14, 10],
      symbolOffset: [ "0%", "-50%"],
      data: diamondData[i],
      itemStyle: {
        color: "#64D8D8",
      },
      tooltip: {
        show: false,
      },
    }
  );

  return p;
}, []);

export default {
  components: {
    border,
  },
  mixins: [StatisticsMixins],
  data() {
    return {
      option_column: {
        tooltip,
        legend,
        xAxis,
        yAxis,
        series,
        grid,
      },
    };
  },
  computed: {},
  props: {
    deptId: {
      type: [String, Number],
      default: "",
      option_column: {},
    },
  },
  watch: {
    deptId: {
      handler(newV, oldV) {
        this.$nextTick(() => {
          this.getInfo();
        });
      },
      immediate: true,
    },
  },
  methods: {
    getInfo() {
      console.log(this.option_column);
      this.$postAction(bigScreenApi.treatmentDeathMonthCount + "?deptId=" + this.deptId).then((res) => {
        if (res && res.code == 1) {
          let cowData = res.data;
          console.log(cowData);
          let illList = [];
          let dieList = [];
          let nameList = [];
          cowData.forEach((item) => {
            illList.push(item.treatmentCount);
            dieList.push(item.deathCount);
            nameList.push(item.month + "月");
          });
          this.option_column.xAxis.data = nameList;
          this.option_column.series[0].data = illList;
          this.option_column.series[1].data = illList;

          this.option_column.series[2].data = dieList;

          this.option_column.series[3].data = dieList;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .listbox {
  margin: 0.2rem 0.23rem 0.2rem 0.63rem;
  height: calc(100% - 0.2rem);
  overflow: hidden;
  position: relative;

  .line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4.5em;
    width: 1px;
    background: #535b65;
  }
}

.list {
  height: 100%;
}

.list-item {
  color: #ffffff;

  .list-item + .list-item {
    margin-top: 0.15rem;
  }

  .name {
    width: 4em;
    margin-right: 0.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .progress {
    width: 2.5rem;

    .progress_bg {
      background: linear-gradient(90deg, rgba(63, 149, 206, 0.3) 0%, #28f3f3 100%);
      height: 0.12rem;
    }
  }

  .num {
    margin-left: 0.32rem;
    width: 6em;

    .unit {
      color: #9cadd1;
    }
  }
}
</style>